<template>
  <div class="goodsClassdetails bg-hex-fff">
    <!-- 输入框 -->
    <div class="mt-20rpx flex items-center px-25rpx">
      <div class="relative w-full">
        <input class="h-68rpx flex-1 rounded-50 bg-hex-f5f5f5 pl-100rpx"
               placeholder-class="text-hex-CBCBCBFF text-26rpx font-400" type="text" placeholder="养生膳食">
        <div class="absolute left-32rpx top-50% h-40rpx w-40rpx translate-y-(-50%)">
          <image :src="`${cdnUrl}/imgs/shop/search.png${imgVersion}`" mode="scaleToFill" class="h-full w-full" />
        </div>
        <div class="absolute left-84rpx top-50% h-20rpx w-2rpx translate-y-(-50%) bg-hex-D9D9D9FF" />
        <div
          class="absolute right-10rpx top-50% box-border h-50rpx w-105rpx translate-y-(-50%) rounded-full bg-hex-ABCD03FF text-center leading-50rpx text-hex-fff">
          搜索</div>
      </div>
    </div>
    <div class="box-border rounded-t-32rpx pt-32rpx">
      <div class="mx-32rpx">
        <s-waterfall :datalist="goodsList" :column="2">
          <template #default="{ item }">
            <div class="mb-30rpx rounded-32rpx pr-32rpx" @click="goodsDatails">
              <div
                class="bg-water mb-24rpx w-326rpx flex items-center justify-center rounded-32rpx bg-hex-FAF9F8">
                <image class="w-100% rounded-24rpx" lazy-load :src="item.imgUrl" mode="widthFix" />
              </div>
              <text
                class="multiLine-hiddle textHide2 mx-10rpx mt-10rpx inline-block text-28rpx font-600 text-hex-333">进口零食大礼包膨化食品进
                口零食大礼包膨化食品进口零食大礼包膨化食品进
                口零食大礼包膨化食品</text>
              <div
                v-if="item.newState===1"
                class="my-20rpx w-48rpx rounded-5rpx bg-hex-FFF2E3 p-3rpx text-20rpx font-500 text-hex-E89C43">
                上新
              </div>
              <div class="flex items-center justify-between">
                <div>
                  <div class="flex items-end">
                    <div class="text-34rpx font-400 text-hex-ff4d4e">¥29</div>
                    <div class="textdecor ml-10rpx text-24rpx font-500 text-hex-999">￥39</div>
                  </div>
                  <div class="textdecor mt-5rpx text-24rpx font-500 text-hex-999">已售1000</div>
                </div>
                <image :src="`${cdnUrl}/imgs/shop/cart-icon.png${imgVersion}`" class="h-44rpx w-44rpx" />
              </div>
            </div>
          </template>
        </s-waterfall>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
const goodsList = [
  { imgUrl: `${cdnUrl}/imgs/square/test1.png${imgVersion}` },
  { imgUrl: `${cdnUrl}/imgs/square/test2.png${imgVersion}` },
  { imgUrl: `${cdnUrl}/imgs/square/test2.png${imgVersion}` },
  { imgUrl: `${cdnUrl}/imgs/square/test2.png${imgVersion}` },
  { imgUrl: `${cdnUrl}/imgs/square/test2.png${imgVersion}` },
  { imgUrl: `${cdnUrl}/imgs/square/test2.png${imgVersion}` },
  { imgUrl: `${cdnUrl}/imgs/square/test2.png${imgVersion}` },
  { imgUrl: `${cdnUrl}/imgs/square/test2.png${imgVersion}` },
]
const goodsDatails = () => {
  uni.navigateTo({
    url: '/pages-shop/goodsdetails',
  })
}
</script>

<style lang="scss">
.goodsClassdetails {
  .textHide2 {
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }

  .textdecor {
    text-decoration: line-through;
  }
}
</style>
